<script setup>
import {onMounted, reactive, ref, toRaw} from "vue";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import api from "../../request/apis.js";

let originalModel;
// let modifiedModel;
let monacoDiffInstance;
const container = ref();

const defaultOpts = reactive({
  value: "",
  theme: "vs", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网https://microsoft.github.io/monaco-editor/docs.html
  roundedSelection: false, // 右侧不显示编辑器预览框
  autoIndent: true, // 自动缩进
  readOnly: false, // 是否只读
  diffWordWrap: true,
  wordWrap: 'on',
  automaticLayout: true,
  scrollBeyondLastLine: false,
  scrollbar: {
    verticalScrollbarSize: 0
  },
});
const init = () => {
  // 初始化编辑器实例
  monacoDiffInstance = monaco.editor.create(
      container.value,
      //配置项
      defaultOpts
  );
  // originalModel = monaco.editor.createModel(
  //     oldValue,
  //     'json'
  // );
  // modifiedModel = monaco.editor.createModel(
  //     newvalue,
  //     'json'
  // );
  // monacoDiffInstance.setModel({
  //   original: originalModel,
  //   modified: modifiedModel,
  // });
}

const windowHeight = ref();
const split = ref(0.1);


onMounted(() => {
  init();
  setWindowHeight();
  queryParamList();
});


const paramList = ref([]);
const queryParamList = async () => {
  paramList.value = await api.queryParamList();
}

const setWindowHeight = () => {
  const d = window.innerHeight - 100;
  windowHeight.value = d;
}

window.addEventListener("resize", function () {
  setWindowHeight();
})

const setConfigValue = (data) => {
  monacoDiffInstance.setValue(data?.value)
}

const config = ref({
  key: '',
  value: '',
  description: ''
});
const addConfig = async () => {
  addConfigFlag.value = false;

  // localStorage.getItem("")
  await api.addConfig(toRaw(config.value));
  config.value = {};
  await queryParamList();
}

const addConfigFlag = ref(false)

</script>

<template>

  <div class="demo-split" :style="{ height: windowHeight+'px' }">
    <Split v-model="split">
      <template #left>
        <div class="demo-split-pane">

          <div v-for="item in paramList">
            <Row>
              <Col span="24">
                <Card @click="setConfigValue">
                  <template #title>{{ item.key }}</template>
                  <p>{{ item.description }}</p>
                </Card>
              </Col>
            </Row>
            <Divider/>
          </div>

          <Divider/>
          <div>
            <Row>
              <Col span="5">
                &nbsp;
              </Col>
              <Col span="12">
                <Button type="primary" @click="addConfigFlag=true">新增配置</Button>
              </Col>
            </Row>

          </div>


          <Modal
              v-model="addConfigFlag"
              title="新增配置"
              @on-ok="addConfig"
              @on-cancel="addConfigFlag=false">


            <Row>
              <Col span="2">
                key:
              </Col>
              <Col span="4">
                <Input v-model="config.key" placeholder="key" style="width: 300px"/>
              </Col>
            </Row>

            <Row style="margin-top: 10px">
              <Col span="2">
                value:
              </Col>
              <Col span="4">
                <Input v-model="config.value" placeholder="value" style="width: 300px"/>
              </Col>
            </Row>

            <Row style="margin-top: 10px">
              <Col span="4">
                description:
              </Col>
              <Col span="2">
                <Input v-model="config.description" placeholder="description" style="width: 260px"/>
              </Col>
            </Row>
          </Modal>
        </div>
      </template>
      <template #right>
        <div class="demo-split-pane">
          <div
              ref="container"
              class="monaco-editor"
              :style="{height:windowHeight+'px'}"
          ></div>
        </div>
      </template>
    </Split>
  </div>

</template>

<style scoped>
.demo-split {
  border: 1px solid #dcdee2;
}

.demo-split-pane {
  padding: 10px;
}
</style>